<template>
	<div class="app-lock">
		<img src="/assets/img/lock.png" />
		<div class="app-lock-content">
			<h3 class="title">{{ state.userName }}</h3>
			<a-input-search
				v-model:value="state.value"
				:placeholder="$t('function.lockscren.placeholder1')"
				size="large"
			>
				<template #enterButton>
					<div>
						<a-button size="large" @click="handleLogin"
							><UnlockOutlined
						/></a-button>
						<a-button size="large" @click="handleLogout"
							><LogoutOutlined
						/></a-button>
					</div>
				</template>
			</a-input-search>
		</div>
	</div>
</template>

<script setup lang="ts">
import { UnlockOutlined, LogoutOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
const route: any = useRoute();
const { push } = useRouter();
const state = reactive({
	userName: '',
	value: '',
	lockScreen: '',
});

onMounted(() => {
	state.userName = sessionStorage.getItem('userName') as string;
	state.lockScreen = window.atob(
		sessionStorage.getItem('lockScreen') as string
	);
});

const handleLogin = () => {
	if (state.lockScreen != state.value) {
		state.value = '';
		App.getNotificationHelper().error(
			App.ts('function.generic.error', '错误'),
			App.ts('function.lockscren.message1', '解锁密码错误,请重新输入')
		);
		return;
	}
	clearSession();
	const url = route.query.redirect || '/';
	push({ path: url });
};

const handleLogout = () => {
	App.logout().then(() => {
		clearSession();
		push({ name: 'login' });
	});
};

const clearSession = () => {
	sessionStorage.removeItem('lockScreen');
	sessionStorage.removeItem('lockState');
	sessionStorage.removeItem('userName');
};
</script>
